import { useState, useEffect } from 'react'

export const withDelayRender = (WrappedComponent: any, delay?: number) => {
  return function DelayRender(props: any) {
    const [shouldRender, setShouldRender] = useState(false)
    useEffect(() => {
      const timeoutId = setTimeout(() => {
        setShouldRender(true)
      }, delay)
      return () => {
        clearTimeout(timeoutId)
      }
    }, [])
    return shouldRender ? <WrappedComponent {...props} /> : null
  }
}
